<template>
    <view class="container">
        <status-bar bgColor="#ddad44"></status-bar>
        <view class="header">
            <!-- <image class="logo" src="/static/logo.png" mode="aspectFit" /> -->
            <view class="welcome">
                <text class="title">欢迎来到诚訫租</text>
                <text class="subtitle">租房从未如此简单</text>
            </view>
        </view>

        <view class="content">
            <view class="auth-info">
                <view class="info-title">授权后即可体验更多功能</view>
                <view class="info-list">
                    <!-- <view class="info-item">
                        <uni-icons type="checkmarkempty" size="20" color="#ddad44"></uni-icons>
                        <text>获取您的支付宝账号信息</text>
                    </view> -->
                    <view class="info-item">
                        <uni-icons type="checkmarkempty" size="20" color="#ddad44"></uni-icons>
                        <text>获取您的手机号码</text>
                    </view>
                </view>
            </view>

            <view class="btn-area">
                <button class="auth-btn" open-type="getAuthorize" scope="phoneNumber" @getPhoneNumber="handleAuth">支付宝账号快捷登录</button>
                <!-- <view class="privacy-tip">
                    登录即代表您已同意
                    <text class="link" @tap="goPrivacy">《用户协议》</text>
                    和
                    <text class="link" @tap="goPrivacy">《隐私政策》</text>
                </view> -->
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import statusBar from "@/components/base/statusBar.vue";
import Interact from '@/utils/interact'
import { decrptMobile } from '@/api/base';
import { getUserInfoFn } from '@/hooks/login';
import { onLoad } from '@dcloudio/uni-app';
import { useStore } from 'vuex';
const Store = useStore();

onLoad(() => {


})

const handleAuth = () => {
    uni.showLoading({
        title: '登录中...'
    });
    // 获取手机号码
    my.getPhoneNumber({
        protocols:{
            isvAppId: '2021001103606442'
        },
        success: async (res: any) => {
            let encryptedData = {
                response: '',
                sign: ''
            }
            try {
                encryptedData = JSON.parse(res.response)
            } catch(err) {
                Interact.toast('授权失败');
            }
            console.log(encryptedData);

            decrptMobile({
                token: Store.state.user.tempAccout.token,
                platform: '03',
                data: JSON.stringify({ sign: encryptedData.sign }),
                encrptData: encryptedData.response,
                extData: JSON.stringify({}),
            }).then(async (res) =>{
                Store.commit("user/SET_USER_ACCOUNT", {
                    ...Store.state.user.tempAccout,
                    userId: res.data.userId
                });
                await getUserInfoFn()
                setTimeout(() =>{
                    if(Store.state.user.loginBindPhonePromiseResolve) {
                        Store.state.user.loginBindPhonePromiseResolve(true)
                        Store.commit( "user/SET_LOGIN_BIND_PHONE_PROMISE_RESOLVE", null );
                    }
                    uni.navigateBack({
                        delta: 1,
                        fail: () => {
                            uni.reLaunch({ url: '/pages/index' });
                        }
                    });
                })
            })
        },
        fail: (err: any) => {
            Interact.toast('获取手机号失败');
        }
    });
};

// const goPrivacy = () => {
//     uni.navigateTo({
//         url: '/pages/agreement/index'
//     });
// };
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #fff;

    .header {
        background-color: #ddad44;
        padding: 160rpx 40rpx;
        padding-bottom: 120rpx;
        border-bottom-left-radius: 40rpx;
        border-bottom-right-radius: 40rpx;

        .logo {
            width: 160rpx;
            height: 160rpx;
            margin-bottom: 40rpx;
        }

        .welcome {
            .title {
                display: block;
                font-size: 48rpx;
                color: #fff;
                font-weight: bold;
                margin-bottom: 20rpx;
            }

            .subtitle {
                font-size: 32rpx;
                color: rgba(255, 255, 255, 0.9);
            }
        }
    }

    .content {
        margin-top: -60rpx;
        padding: 0 40rpx;

        .auth-info {
            background: #fff;
            border-radius: 20rpx;
            padding: 40rpx;
            box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);

            .info-title {
                font-size: 32rpx;
                color: #333;
                font-weight: bold;
                margin-bottom: 30rpx;
            }

            .info-list {
                .info-item {
                    display: flex;
                    align-items: center;
                    margin-bottom: 20rpx;
                    font-size: 28rpx;
                    color: #666;

                    .uni-icons {
                        margin-right: 16rpx;
                    }
                }
            }
        }

        .btn-area {
            margin-top: 80rpx;

            .auth-btn {
                width: 100%;
                height: 90rpx;
                line-height: 90rpx;
                background: #ddad44;
                color: #fff;
                font-size: 32rpx;
                font-weight: bold;
                border-radius: 45rpx;
                border: none;
            }

            .privacy-tip {
                margin-top: 30rpx;
                text-align: center;
                font-size: 24rpx;
                color: #999;

                .link {
                    color: #ddad44;
                    display: inline;
                }
            }
        }
    }
}
</style>
